<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="时间管理" />
        <view class="content">
            <view class="card">
                <view class="item flex align-center just-between">
                    <view class="title flex align-center">
                        <text class="sub fb-28">是否接单</text>
                        <text class="tip f-24" v-if="checked">接单中</text>
                        <text class="subtip f-24" v-else>休息中</text>
                    </view>
                    <view
                        class="switch"
                        @click="change"
                        :style="{ background: checked ? '#a194d7' : '#bbbbbb' }"
                    >
                        <image
                            class="switch-inner"
                            :class="checked ? 'innerR' : 'innerL'"
                            src="/static/static/technician/joinUs/switchinner.png"
                        />
                    </view>
                </view>
            </view>
            <view class="card">
                <view class="timefilter">
                    <view class="title fb-28 mb-20"
                        >选择接单时间
                        <!-- <text class="tips">选择的时间间隔最小为30分钟</text> -->
                    </view>
                    <view class="time line mb-20 flex align-center just-around">
                        <view class="start f-28 flex column t-c">
                            <text class="sub">开始时间</text>
                            <picker
                                @change="bindPickerChangeStart"
                                :value="start"
                                mode="time"
                            >
                                <view class="uni-input active mt-10">
                                    {{ start || "请选择" }}
                                </view>
                            </picker>
                        </view>
                        <view class="end f-28 flex column t-c">
                            <text class="sub">结束时间</text>
                            <picker
                                @change="bindPickerChangeEnd"
                                :value="endStart"
                                :start="start"
                                mode="time"
                            >
                                <view class="uni-input active mt-10">
                                    {{ end || "请选择" }}
                                </view>
                            </picker>
                        </view>
                    </view>
                    <view class="timelist">
                        <view class="sub fb-28 mb-20">设置不可接单时间</view>
                        <view class="day fb-28 mb-20">今天</view>
                        <view class="days f-28">
                            <view
                                class="box flex column align-center just-center"
                                :class="
                                    i.type == 0
                                        ? 'disabled'
                                        : i.type == 1
                                        ? 'activetime'
                                        : ''
                                "
                                v-for="i in timelist"
                                :key="i.time"
                                @click="onChoose(i)"
                            >
                                <text class="timetext">{{ i.time }}</text>
                                <text class="status">
                                    {{ status(i.type) }}
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="btns">
            <view class="btn" @click="submit"> 保存 </view>
        </view>
    </div>
</template>
<script>
import { getTimeList, editBasicInfo } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            checked: false,
            start: "",
            end: "",
            endStart: "",
            timelist: [],
            chooseTimeList: [],
            info: {},
        };
    },

    onLoad(options) {
        this.getTime();
        this.info = JSON.parse(options.info);
        this.checked = this.info.is_service == 0 ? false : true;
        this.start = this.info.receive_create;
        this.end = this.info.receive_end;
        this.endStart = this.info.receive_end;
    },

    onPullDownRefresh() {
        this.getTime();
    },

    methods: {
        // 是否接单
        change() {
            this.checked = !this.checked;
        },

        // 开始时间
        bindPickerChangeStart(e) {
            this.start = e.target.value;
        },

        // 结束时间
        bindPickerChangeEnd(e) {
            if (this.start == "") {
                uni.showToast({
                    title: "请选择开始时间",
                    icon: "none",
                });
                return;
            }
            this.end = e.target.value;
            const strat1 = this.start.substr(0, 2);
            const strat2 = this.start.substr(-2);
            const end1 = this.end.substr(0, 2);
            const end2 = this.end.substr(-2);
            if (strat1 == end1) {
                if (strat2 > end2) {
                    uni.showToast({
                        title: "开始时间不能大于结束时间",
                        icon: "none",
                    });
                    return;
                } else if (strat2 == end2) {
                    uni.showToast({
                        title: "开始时间不能等于结束时间",
                        icon: "none",
                    });
                    return;
                } else {
                    getTimeList({
                        start_time: this.start,
                        end_time: this.end,
                    }).then((res) => {
                        this.timelist = res.data;
                    });
                }
            } else if (strat1 > end1) {
                uni.showToast({
                    title: "开始时间不能大于结束时间",
                    icon: "none",
                });
                return;
            } else {
                getTimeList({
                    start_time: this.start,
                    end_time: this.end,
                }).then((res) => {
                    this.timelist = res.data;
                });
            }
        },

        getTime() {
            getTimeList({
                start_time: this.start,
                end_time: this.end,
            }).then((res) => {
                this.timelist = res.data;
            });
        },

        status(type) {
            switch (type) {
                case 0:
                    return "不可选中";
                case 1:
                    return "接单中";
                case 2:
                    return "休息中";
            }
        },

        onChoose(i) {
            this.timelist.forEach((item, index) => {
                if (item.time == i.time && item.type == 2) {
                    this.timelist[index].type = 1;
                } else if (item.time == i.time && item.type == 1) {
                    this.timelist[index].type = 2;
                }
            });
            this.chooseTimeList = [];
            this.timelist.forEach((item, index) => {
                if (item.type == 2) {
                    this.chooseTimeList.push(item.time);
                }
            });
        },
        submit() {
            editBasicInfo({
                is_service: this.checked ? 1 : 0,
                rest_time: this.chooseTimeList.join(","),
                receive_create: this.start,
                receive_end: this.end,
                type: 1,
            })
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: "none",
                    });
                    setTimeout(() => {
                        uni.navigateBack({ delta: 1 });
                    }, 800);
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 20rpx;
    box-sizing: border-box;
    .item {
        .tip {
            margin-left: 30rpx;
            color: $theme-color;
        }
        .subtip {
            margin-left: 30rpx;
            color: #bbb;
        }
        .switch {
            width: 84rpx;
            height: 38rpx;
            position: relative;
            border-radius: 20rpx;
            &-img {
                width: 100%;
                height: 100%;
            }
            &-inner {
                width: 28rpx;
                height: 28rpx;
            }
            .innerL {
                position: absolute;
                top: 50%;
                left: 20rpx;
                transform: translate(-50%, -50%);
            }
            .innerR {
                position: absolute;
                top: 50%;
                right: -10rpx;
                transform: translate(-50%, -50%);
            }
        }
    }

    .timefilter {
        .time {
            border-top: 2rpx solid #e5e5e5;
            border-bottom: 2rpx solid #e5e5e5;
            padding: 40rpx 0 30rpx 0;
        }
    }

    .timelist {
        .day {
            width: 60rpx;
            padding-bottom: 10rpx;
            text-align: center;
            color: $theme-color;
            border-bottom: 4rpx solid #a194d7;
        }
        .days {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .box {
                width: 152.5rpx;
                height: 108rpx;
                border: 2rpx solid #e5e5e5;
                border-radius: 20rpx;
                margin: 10rpx 5rpx;
            }
        }
    }
}

.activetime {
    color: white !important;
    background: $theme-color;
}

.disabled {
    color: #999999;
    background: #e5e5e5;
}

.mb-20 {
    margin-bottom: 20rpx;
}

.mt-10 {
    margin-top: 10rpx;
}

.card {
    padding: 28rpx 25rpx;
    background-color: white;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);

    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
.tips {
    font-size: 24rpx;
    color: #999999;
    margin-left: 20rpx;
    font-weight: normal;
}
</style>